<template>
  <div class="list-container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 上拉加载组件 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
        <article-list-item
          v-for="item in articleList"
          :key="item.art_id"
          :item="item"
          @click.native="goDetail(item.art_id)"
        />
        <!--
          当给一个组件通过@绑定一个事件的时候 默认识别的是自定义事件
          自定义事件必须配合 $emit('自定义事件') 否则无法识别
          1. 在组件内部通过$emit去触发
          2. 加一个.native修饰符 vue会自动帮助我们把原生的click绑定的组件的根元素身上
             <div @click=""></div>
         -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleListItem from './article-list-item.vue'
import { articlesListAPI } from '@/api'
export default {
  props: {
    channelId: {
      type: Number
    }
  },
  components: {
    ArticleListItem
  },
  data () {
    return {
      articleList: [],
      loading: false, // 当前是否正在加载数据中 true表示正在加载 此时会暂停事件触发 false 没加加载 可以正常触发事件
      finished: false, // 表示当前是否已经全部加载完毕 如果加载完毕了需要我们手动设置为true 彻底停止
      pre_time: +new Date(), // 缓存时间参数
      isLoading: false // 是否正在下拉刷新中已经触发了异步回调 自动进行变化 变化成true
    }
  },
  mounted () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      // channelId:当前点击项的id值不能直接获取 需要父组件传下来
      // timestamp: 当前时间戳为主
      const res = await articlesListAPI({
        channelId: this.channelId,
        timestamp: this.pre_time
      })
      this.articleList = res.data.results
      this.pre_time = res.data.pre_timestamp
    },
    // 触底时自动触发的回调函数 在这里需要编写上拉加载的核心逻辑
    async onLoad () {
      // 上拉加载核心逻辑
      // 0. 准备获取下一页数据的必要参数 [当前返回数据中的pre_timestamp做为下一页数据的请求参数]
      // 1. 调用接口获取下一页的数据
      const res = await articlesListAPI({
        channelId: this.channelId,
        timestamp: this.pre_time
      })
      // 2. 把老数据和新数据做拼接处理
      this.articleList = [...this.articleList, ...res.data.results]
      // 更新时间戳 为下一次加载做准备
      this.pre_time = res.data.pre_timestamp
      // 3. 手动把loading开关重新设置为false 开启下一次的上拉加载
      this.loading = false
      // 4. 判断当前是否还有剩余数据 如果没了 手动finished设置为true 彻底结束
      if (!res.data.pre_timestamp) {
        this.finished = true
      }
    },
    async onRefresh () {
      console.log('下拉刷新开始了')
      // 逻辑: 使用最新的时间戳获取列表交给articleList
      // 1. 重置时间戳到最新
      this.pre_time = +new Date()
      // 2. 直接调用getArticleList
      await this.getArticleList()
      // 3. 重置isLoading开关 让它再次开启下拉刷新检测
      this.isLoading = false
    },
    goDetail (id) {
      console.log(id)
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.list-container {
  position: fixed;
  bottom: 52px;
  top: 46px;
  width: 100%;
  overflow: auto;
}
</style>
